<template>
  <div class="login-box flex-row-center">
    <back-button></back-button>


    <div v-show="method===1" class="login-form-box flex-col-center">

      <form action="" class="login-form flex-col-center">

        <MiInput1 class="login-input" label="账号" type="text"></MiInput1>
        <MiInput1 class="login-input" label="密码" type="password"></MiInput1>
        <div class="flex-row-end login-input">
          <el-input placeholder="验证码" prefix-icon="el-icon-lock" size="small"
                    style="width:60%;margin-right: 5px"></el-input>
          <el-tooltip class="item" content="看不清?点我切换" effect="dark" placement="right">
            <el-Image :src="validateCodeUrl" style="cursor: pointer;width: 30%" @click="changeValidateCode"></el-Image>
          </el-tooltip>

        </div>
        <MiButton2 bg-color="#07897D" class="login-btn">登录</MiButton2>
        <!--              <el-button class="login-btn">登录</el-button>-->
        <div class="login-form-menu-box flex-row-around">
          <el-link href="/register" type="primary">注册账号</el-link>
          <el-link type="danger" @click="method=2">邮箱登录</el-link>
          <el-link type="danger" @click="method=3">手机登录</el-link>
          <el-link href="/forget" type="primary">忘记密码</el-link>
        </div>
      </form>

    </div>


    <!--      邮箱登录-->
    <div v-show="method===2" class="login-form-box flex-col-center">

      <form action="" class="login-form flex-col-center">

        <vs-input v-model="emailMethod.email" border color="#07897D" placeholder="请输入邮箱" style="width: 90%">
          <template #icon>
            <i class='el-icon-message'></i>
          </template>
        </vs-input>
        <div class="flex-row-start" style="width: 90%;margin:30px 0">
          <vs-input v-model="emailMethod.code" v-loading="emailCodeLoading" border color="#07897D" placeholder="验证码">
          </vs-input>
          <el-link style="font-size: 12px" @click="sendEmailCode" v-text="emailMethod.btnText"></el-link>
        </div>
        <!--        <el-input  prefix-icon="el-icon-message" v-model="emailMethod.email" placeholder="请输入邮箱" type="text" class="login-input"></el-input>-->
        <!--        <div class="flex-row-start login-input">-->
        <!--          <el-input :min="1" :max="6" v-model="emailMethod.code" size="small" placeholder="验证码"-->
        <!--                    prefix-icon="el-icon-lock" style="width:60%;margin-right: 5px"></el-input>-->
        <!--          <el-button size="mini" @click="sendEmailCode" style="width: 40%" v-text="emailMethod.btnText"></el-button>-->

        <!--        </div>-->
        <el-button
            border
            class="login-btn"
            color="#3CDEC4"
            @click="emailLogin"
        >
          登录
        </el-button>
        <!--        <el-button type="primary" round plain class="login-btn" @click="emailLogin">登录</el-button>-->

        <div class="login-form-menu-box flex-row-around">
          <el-link href="/register" type="primary">注册账号</el-link>
          <el-link type="danger" @click="method=1">账号/密码</el-link>
          <el-link type="danger" @click="method=3"> 手机登录</el-link>
          <el-link href="/forget" type="primary">忘记密码</el-link>
        </div>
      </form>

    </div>


    <!--    手机登录-->
    <div v-show="method===3" class="login-form-box flex-col-center">

      <form action="" class="login-form flex-col-center">

        <el-input v-model="emailMethod.email" class="login-input" placeholder="请输入手机号" prefix-icon="el-icon-mobile"
                  type="text"></el-input>
        <div class="flex-row-end login-input">
          <el-input v-model="emailMethod.code" :max="6" :min="1" placeholder="验证码" prefix-icon="el-icon-lock"
                    size="small" style="width:60%;margin-right: 5px"></el-input>
          <el-button size="mini" @click="sendEmailCode" v-text="emailMethod.btnText"></el-button>

        </div>
        <el-button class="login-btn" plain round type="primary" @click="emailLogin">登录</el-button>

        <div class="login-form-menu-box flex-row-around">
          <el-link href="/register" type="primary">注册账号</el-link>
          <el-link type="danger" @click="method=1">账号/密码</el-link>
          <el-link type="danger" @click="method=2">邮箱登录</el-link>
          <el-link href="/forget" type="primary">忘记密码</el-link>
        </div>
      </form>

    </div>
  </div>
</template>

<script>
import BackButton from "@/components/button/BackButton.vue";
import MiInput1 from "@/components/input/MiInput1.vue";
import MiButton2 from "@/components/button/MiButton2.vue";
import YImage from "@/components/image/YImage.vue";
import {emailApi} from "@/api/email/email";
import {userApi} from "@/api/user/user";
import {setToken} from "@/util/TokenUtil";

export default {
  name: "Login",
  components: {YImage, MiButton2, MiInput1, BackButton},
  data() {
    return {
      emailCodeLoading: false,
      validateCodeUrl: "/userApi/user/kaptcha",
      method: 2,
      emailMethod: {
        email: "",
        code: "",
        btnText: "获取验证码"
      },
      phoneMethod: {
        phone: "",
        code: ""
      }
    }
  },
  methods: {
    // 倒计时验证码，60s
    startLimit() {
      let i = 60
      let timer = setInterval(() => {
        if (i === 0) {
          clearInterval(timer)
          this.emailMethod.btnText = "获取验证码"
          return
        }
        this.emailMethod.btnText = i + 's'
        i--;
      }, 1000)
      return timer
    },
    changeValidateCode() {
      this.validateCodeUrl = this.validateCodeUrl + "?" + new Date().getTime()
    },
    sendEmailCode() {
      if (!this.emailMethod.email) {
        this.$message.error("请先输入邮箱")
        return
      }
      this.emailCodeLoading = true
      emailApi.sendLoginCode(this.emailMethod.email).then(resp => {
        if (resp.code === 200) {
          this.emailCodeLoading = false
          this.startLimit()
          this.$message.success("发送成功")
        } else {
          this.$message.error("发送失败")
        }
      })
    },
    emailLogin() {
      if (!this.emailMethod.email || !this.emailMethod.code) {
        this.$message.error("请先输入内容")
        return
      }


      userApi.loginByEmail({
        email: this.emailMethod.email,
        code: this.emailMethod.code
      }).then(resp => {

        if (resp.code === 200) {
          this.$message.success("登录成功")

          // 存储token
          setToken(resp.data)
          // 跳转首页
          this.$router.push("/index")
        } else {
          this.$message.error("登录失败:" + resp.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

.login-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("@/static/img/login/login-bg.jpg") no-repeat center;
  background-size: cover;

  .login-form-box {
    position: relative;
    width: 30%;
    height: 400px;
    min-width: 300px;
    background-color: white;
    //background-color: #2B323D;
    color: #07897D;
    font-size: 20px;
    /*filter: blur(20px);*/
    box-shadow: var(--box-shadow);
    border-radius: 5px;
    z-index: 3;
    animation: rotateOneTurn 0.3s ease-in-out;

    .login-form {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      z-index: 2;

      .login-input {

        margin: 15px 0;
        width: 80%;

      }

      .login-btn {
        margin-top: 5px;
        width: 150px;
      }

      div.login-form-menu-box {
        width: 100%;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 5px;

        .el-link {
          caret-color: transparent;
        }

      }
    }

    &:before {
      content: " ";
      position: absolute;
      width: 30%;
      aspect-ratio: 1;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      border-radius: 50%;
      background: url("@/static/img/login/login-logo.jpeg") no-repeat center;
      background-size: cover;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    }
  }
}

@keyframes rotateOneTurn {
  100% {
    transform: rotateY(360deg);
  }
}
</style>